<template>
  <div class="app-container">

    <div class="toolbar-section">
      <search-bar :form="queryParams" @sub="getList"></search-bar>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
           
              plain
              @click="handleAdd"
          >新增</el-button>
          <el-button
              plain
              @click="handleBatchDelete"
          >批量删除</el-button>
          <el-button
              plain
              @click="handlePrintTag"
          >打印标签</el-button>
          <el-button
              plain
              @click="handleImport"
          >导入</el-button>
        </el-col>
        <right-toolbar @queryTable="getList" @export-table="handleExport"></right-toolbar>
      </el-row>
    </div>
    <div class="table-section">
      <vxe-table height="auto" ref="table" :data="tableData.list" :loading="tableData.loading">
        <vxe-column type="seq" width="55" align="center" />
        <vxe-column field="state" width="80" title="状态" align="center">
          <template #default="{ row }">
            <dict-tag :options="asset_state" :value="row.state" />
          </template>
        </vxe-column>
        <vxe-column field="number" width="120" title="图片" align="center">
          <template #default="{ row }">
            <el-tooltip v-if="row.imgUrl" class="box-item" effect="dark" placement="right-start">
              <template #content>
                <img alt="" :src="showImg(row.imgUrl)" width="100" height="100" />
              </template>
              <img alt="" :src="showImg(row.imgUrl)" width="30" height="30" />
            </el-tooltip>
            <span v-else>没有图片</span>
          </template>
        </vxe-column>
        <vxe-column field="number" width="120" title="资产编码" align="center"/>
        <vxe-column field="name" width="180" title="资产名称" align="center"/>
        <vxe-column field="categoryName" width="120" title="资产分类" align="center"/>
        <vxe-column field="rfid" width="290" title="RFID" align="center"/>
        <vxe-column field="brand" width="120" title="品牌" align="center"/>
        <vxe-column field="model" width="120" title="型号" align="center"/>
        <vxe-column field="buyWay" width="120" title="购置方式" align="center"/>
        <vxe-column field="buyTime" width="180" title="购置时间" align="center">
          <template #default="{ row }">
            <span>{{ row.buyTime }}</span>
          </template>
        </vxe-column>
        <vxe-column field="buyPrice" width="120" title="购置金额" align="center"/>
        <vxe-column field="userName" width="120" title="使用人" align="center"/>
        <vxe-column field="adminName" width="120" title="管理员" align="center"/>

        <vxe-column width="150" title="操作" fixed="right" align="center" class-name="small-padding fixed-width">
          <template #default="{ row }">

            <el-button size="small" link type="primary" @click="handleUpdate(row)">修改</el-button>
            <el-button size="small" link type="primary" @click="handleSendCard(row)">发卡</el-button>
            <el-button size="small" link type="primary" @click="handleDelete(row)">删除</el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </div>

    <div class="pagination-section">
      <pagination
          v-show="tableData.paging.total > 0"
          :total="tableData.paging.total"
          v-model:page="tableData.paging.pageNum"
          v-model:limit="tableData.paging.pageSize"
          @pagination="getList"
      />
    </div>


    <!-- 编辑窗口 -->
    <edit ref="editDialog" @sub="getList"></edit>
    <!-- 发卡窗口 -->
    <send-card ref="sendCardDialog" @sub="getList"></send-card>
    <!-- 打印窗口 -->
    <print-tag ref="printTagDialog" @sub="getList"></print-tag>
    <!-- 导入窗口 -->
    <import-dialog ref="importDialog" @sub="getList"></import-dialog>
  </div>
</template>

<script setup>


import api from './api.js'
import { delAssetItem, exportAssetItem } from "@/api/asset/assetItem";
import Edit from './edit'
import SendCard from './sendCard.vue'
import SearchBar from "./SearchBar.vue";
import PrintTag from "@/views/asset/assetItem/PrintTag.vue";
import tableCommon from "@/utils/tableCommon.js";
import ImportDialog from "@/views/asset/assetItem/ImportDialog.vue";


const { proxy } = getCurrentInstance();
const { asset_state } = proxy.useDict("asset_state");

const editDialog = ref();
const sendCardDialog = ref();
const printTagDialog = ref();
const importDialog = ref();

const table = ref();
const tableData = reactive({
  loading: false,
  list: [], // 表格列表数据
  paging: {
    total: 0, // 总条数
    pageNum: 1,
    pageSize: 10,
  }
});

const initQueryParams = {
  state: null,
  field: 'number',
  value: null,
  pageNum: 1,
  pageSize: 10
}

const queryParams = reactive({...initQueryParams})

/** 查询资产清单表列表 */
async function getList() {

  tableData.loading = true;
  const {pageNum, pageSize} = tableData.paging;
  const query = {...queryParams};
  const pageReq = {page: pageNum - 1, size: pageSize};
  api.list(query, pageReq).then(response => {
    const { content, totalElements } = response
    tableData.list = content;
    tableData.paging.total = totalElements;
    tableData.loading = false;
  }).catch(error => {
    tableData.loading = false;
    console.log(error);
  });
}

// 表单重置
function reset() {
  Object.assign(queryParams, initQueryParams)
}

/** 搜索按钮操作 */
function handleQuery() {
  tableData.paging.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  reset();
  handleQuery();
}

function showImg(img) {
  return import.meta.env.VITE_APP_BASE_API + img;
}

/** 新增按钮操作 */
function handleAdd() {
  editDialog.value.open();
}

function handleBatchDelete() {
  const selectedList = table.value.getSelectionRows();

}

/** 修改按钮操作 */
function handleUpdate(row) {
  editDialog.value.open(row);
}

function handleSendCard(row) {
  sendCardDialog.value.open(row);
}

/** 删除按钮操作 */
function handleDelete(row) {
  const ids = row.id || this.ids;
  proxy.$modal.confirm('是否确认删除资产清单表编号为"' + ids + '"的数据项？').then(function() {
    return delAssetItem(ids);
  }).then(() => {
    this.getList();
    this.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

/** 删除全部按钮操作 */
function handleDeleteAll() {
  const ids = table.value.getSelectionRows().map(item=> {
    return item.id;
  })
  proxy.$modal.confirm('是否确认删除所选择的数据项？').then(function() {
    return delAssetItem(ids);
  }).then(() => {
    this.getList();
    this.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

/** 打印标签操作 */
function handlePrintTag() {
  const selectedRows = table.value.getSelectionRows();
  if (!selectedRows || selectedRows.length === 0) {
    return proxy.$modal.alert("请选择你要打印的资产");
  }
  printTagDialog.value.open(selectedRows);

}

function handleImport() {
  importDialog.value.open();
}

/** 导出按钮操作 */
function handleExport() {
  
  api.export().then(response => {
    tableCommon.exportExcel(response);
  }).catch((e) => {
    console.error(e);
  });

}

// 页面打开后获取列表数据
onMounted( async () => {

  await getList();
  // await getTreeData();

});

</script>
